<template>
  <template v-if="list && list.length > 0">
    <slot></slot>
    <div v-if="list.length > 0 && getAmount > 0" class="table-foot">
      <div class="table-foot-num">共{{ getAmount }}条数据</div>
      <div class="table-foot-pagination">
        <el-pagination
          v-model:currentPage="nowpage"
          background
          layout="prev, pager, next"
          :page-size="pageSize"
          :total="getpaginationAmount"
        />
      </div>
    </div>
  </template>

  <template v-else>
    <div class="empty-box">
      <EmptyBox :name="emptyText" :size="emptySize"></EmptyBox>
    </div>
  </template>
</template>

<script name="CustomTable" setup>
import { computed } from 'vue'
// import DemandItem from './demand-item.vue'
const props = defineProps({
  // 总条数
  amount: {
    type: Number,
    default: 0,
  },
  // 当前页数
  page: {
    type: [String, Number],
    default: '1',
  },
  // 列表数据
  list: {
    type: Array,
    default: () => [],
  },
  pageSize: {
    type: Number,
    default: 20,
  },
  emptyText: {
    type: String,
    default: '暂无数据',
  },
  emptySize: {
    type: String,
    default: 'default',
  },
  limitAmount: {
    //分页做限制做多展示条数
    type: Number,
    default: 0,
  },
})

/**
 * 总条数
 */
const getAmount = computed(() => {
  return props.amount
})
const getpaginationAmount = computed(() => {
  return props.limitAmount > 0 &&
    props.limitAmount * props.pageSize < props.amount
    ? props.limitAmount * props.pageSize
    : props.amount
})

const emits = defineEmits(['rowClick', 'update:page'])
const handleRowClick = (item) => {
  emits('rowClick', {
    row: item,
  })
}

/**
 * 分页
 */

const nowpage = computed({
  get: () => parseInt(props.page),
  set: (val) => emits('update:page', val.toString()),
})
</script>

<style scoped>
.table-foot {
  display: flex;
  justify-content: space-between;
}
.table-foot-num {
  font-size: 15px;
  color: #a2abc7;
  line-height: 40px;
}
.empty-box {
  padding-bottom: 10px;
  padding-top: 10px;
}

.empty-box :deep(.empty-box) {
  animation: changeopacity 1s;
}
@keyframes changeopacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>
